// 创建外壳组件
import React, {Component} from "react"
import {Route, Switch, Redirect} from "react-router-dom"

import Home from "./Pages/Home"; // 路由组件
import About from "./Pages/About";
import Header from "./components/Header"; // 一般组件
import MyNavLick from "./components/MyNavLick";
// 创建并暴露App组件
export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生HTML中,靠A标签跳转不同页面 */}
              {/*<a className="list-group-item" href="">About</a>*/}
              {/*<a className="list-group-item active" href="">Home</a>*/}

              {/* 在react中靠路由链接实现切换组件 */}
              {/*<NavLink activeClassName="active" className="list-group-item" to="/about">About</NavLink>*/}
              {/*<NavLink activeClassName="active" className="list-group-item" to="/home">Home</NavLink>*/}
              <MyNavLick to="/about">
                about
              </MyNavLick>
              <MyNavLick to="/home" title="home">
                home
              </MyNavLick>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home}/>
                  <Redirect to="/about"/>
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}